<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../js/vue.js" type="text/javascript"></script>
		<style type="text/css">
			#ball {
				background-color: #FF0000;
				width: 1.125rem;
				height: 1.125rem;
				border-radius: 50%;
				position: absolute;
				top: 5.3125rem;
				left: 5rem;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1>{{ msg }}</h1>
			
			<!-- 编写一个按钮，控制小球切换 -->
			<button type="button" v-on:click="handlerclick">加入购物车</button>
			
			<!-- 用于加入购物车动画的小球 -->
			<transition
			v-on:before-enter="beforeEnter"
			v-on:enter="enter"
			v-on:after-enter="afterEnter"
			v-on:enter-cancelled="enterCancelled">
				<div id="ball" v-show="show"></div>
			</transition>
		</div>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'wangziyuan 真棒',
					show:false
				},
				methods:{
					handlerclick(){
						this.show = !this.show
					},
					// 进入中
					beforeEnter(el){
						//
						console.log('进入中');
						console.log(el);
						el.style.transform = "translate(0,0)";
					},
					// 
					enter(el,done){
						console.log('进入中的enter')
						// el.offsetWidth
						el.offsetHeight
						// el.offset()
						el.style.transform = "translate(-150px,-150px)"
						el.style.transition = "all 2s ease"
						// done相当于引用afterEnter
						done()
					},
					afterEnter(el){
						// 
						console.log('进入后的afterEnter')
						// show变化才会触发transition
						this.show = !this.show
					},
					enterCancelled(el){
						// 
						console.log('enterCancelled')
					}
				}
			})
		</script>
	</body>
</html>
